
// 折线图

option = {
    backgroundColor: '#fff',
    title: {
        text: "Online Store Visitors\n\n\n820\nVisitors Over Time",

    },
    grid: {
        top: '30%',
        left: '3%',
        right: '5%',
        bottom: '15%',
        containLabel: true
    },
    legend: {
        icon: "roundRect",
        data: [
            {
                name: 'This Week',
                itemStyle: {
                    symbol: "rect",
                    color: "#177dfd"
                }
            },
            {
                name: 'Last Week',
                itemStyle: {
                    color: "#cccdcf"
                }
            }
        ],
        right: "10%",
        bottom: "5%",
        textStyle: {
            color: "#A1D5FF",
            fontSize: 12
        },
        itemWidth: 10,  // 设置宽度
        itemHeight: 15, // 设置高度
        itemGap: 10, // 设置间距

    },
    xAxis: [{
        data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th'],
        axisLabel: {
            margin: 10,
            color: '#A1D5FF',
            textStyle: {
                fontSize: 12
            },
        },
        axisLine: {
            lineStyle: {
                color: '#102E74',
            }
        },
        axisTick: {
            show: false
        },
    }],
    yAxis: [{
        splitNumber: 10,
        type: 'value',
        axisLabel: {
            color: '#A1D5FF',
            textStyle: {
                fontSize: 12
            },
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'gray',
            }
        }
    }],
    series: [
        {
            name: 'This Week',
            symbol: "circle",
            smooth: true,
            symbolSize: 8,
            type: "line",
            data: [100, 120, 176, 200, 180, 180, 190],
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    color: '#167eff',
                    shadowColor: 'rgba(93,241,255 ,0.7)',
                    shadowBlur: 10,
                },

            }
        },
        {
            name: 'Last Week',
            symbolSize: 8,
            symbol: "circle",
            type: "line",
            data: [60, 80, 70, 65, 80, 80, 100],
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    color: '#cccdcf',
                    shadowColor: '#FFEED9FF',
                    shadowBlur: 10,
                },

            }
        }
    ]
}

// 柱状图
options = {
    title: {
        text: "Sales\n\n\n$18,230.00\nSales Over Time",
        subtextStyle: {
            color: '#eff6fb',
            fontSize: 16,
            fontWeight: 'normal'
        },
        padding: [0, 10]
    },
    backgroundColor: 'rgb(128,128,128,0)',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            label: {
                show: true,
                backgroundColor: '#333'
            }
        }
    },
    grid: {
        containLabel: true,
        top: '30%',
        left: '3%',
        right: '5%',
        bottom: '15%',
        containLabel: true
    },
    legend: {
        right: "10%",
        bottom: "5%",
        data: ['Last year', 'This year'],
        itemWidth: 15,
        itemHeight: 18,
        padding: 10
    },
    xAxis: {
        data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#6c96b7',
                width: 1
            },
        },
        axisLabel: { //坐标轴刻度标签的相关设置。
            interval: 0,
            // rotate: "45",
            fontSize: 14
        },

    },
    yAxis: [{
        type: 'value',
        axisLabel: {
            formatter: '${value}k',
            fontSize: 16
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#6c96b7',

            }
        },
        splitLine: {
            lineStyle: {
                color: '#25609d',
                width: 2
            }
        }
    },
    ],
    series: [{
        name: 'This year',
        type: 'bar',
        barWidth: 20,
        itemStyle: {
            normal: {
                color: '#157efb'
            }
        },
        data: [2, 4, 3, 3, 1, 2, 3],
    },
    {
        name: 'Last year',
        type: 'bar',
        barWidth: 20,
        barGap: '20%',
        itemStyle: {
            normal: {
                color: '#cfd3dc'
            }
        },
        data: [3, 2, 3, 4, 1, 3, 1],
    }
    ]
}